/**
 * Created by ljg on 2017/4/27.
 */
/**
 *
 * @param id 生成的元素id
 * @param url 地区数据的url
 * */
function initRegion(id,url) {
    $("#"+id).append(' <h3>地区编码查询</h3>' +
                        '<select name="province"> ' +
                            '<option>请选择省份</option> ' +
                        '</select> ' +
                        '<select name="city"> ' +
                            '<option>请选择市</option> ' +
                        '</select> ' +
                        '<select name="county">' +
                            '<option>请选择区县</option> ' +
                        '</select> ' +
                        '<table border="2" class="region"> ' +
                            '<thead align="center"><tr><th>对应的地区</th><th id="provinceName"></th><th id="cityName"></th><th id="countyName"></th></tr></thead> ' +
                            '<tbody align="center"><tr><td>对应的编码值</td><td id="provinceValue"></td><td  id="cityValue"></td><td id="countyValue"></td></tr></tbody> ' +
                        '</table>');
    function loopOption(datas,val) {
        var str="";
        for (let i in datas){
            var selected=datas[i].code==val?'selected':'';
            str+="<option value='"+datas[i].code+"' "+selected+" class='ng-scope'>"+datas[i].name+"</option>";
        }
        return str;
    }
    function changeValue(v,regionData,provinceData) {
        var value = v || '';
        var defaulyData = regionData[value] || {};
        var cityData = {};
        var areaData = {};
        switch (defaulyData.level+"") {
            case "1":
                cityData = provinceData[value].children;
                $("select[name='province']").html('').append($("<option>请选择省份</option>")).append($(loopOption(provinceData,defaulyData.code)));
                $("select[name='city']").html('').append($("<option>请选择市</option>")).append($(loopOption(cityData)));
                $("select[name='county']").html('').append($("<option>请选择区县</option>"));
                break;
            case "2":
                cityData = provinceData[defaulyData.province].children || {};
                areaData = cityData[defaulyData.code].children || {};
                $("select[name='province']").html('').append($("<option>请选择省份</option>")).append($(loopOption(provinceData,defaulyData.province)));
                $("select[name='city']").html('').append($("<option>请选择市</option>")).append($(loopOption(cityData,defaulyData.code)));
                $("select[name='county']").html('').append($("<option>请选择区县</option>")).append($(loopOption(areaData)));
                break;
            case "3":
                cityData = provinceData[defaulyData.province].children || {};
                areaData = cityData[defaulyData.city].children || {};
                $("select[name='province']").html('').append($("<option>请选择省份</option>")).append($(loopOption(provinceData,defaulyData.province)));
                $("select[name='city']").html('').append($("<option>请选择市</option>")).append($(loopOption(cityData,defaulyData.city)));
                $("select[name='county']").html('').append($("<option>请选择区县</option>")).append($(loopOption(areaData,defaulyData.code)));
                break;
            default:
                $("select[name='province']").html('').append($("<option>请选择省份</option>")).append($(loopOption(provinceData)));
                $("select[name='city']").html('').append($("<option>请选择市</option>"));
                $("select[name='county']").html('').append($("<option>请选择市</option>"));
                break;
        }
    };
    var regionData={};
    var provinceData={};
    $.ajax({
        url:url,
        type:'get',
        success:function (result) {
            var dataList=result.data||[];
            var cityData={};
            var areaData={};
            for(var i in dataList){
                var data=dataList[i]||{};
                var dd={code:data.code,name:data.name,pcode:data.pcode,province:data.province,city:data.city,level:data.level};
                regionData[data.code]=dd;
                if(data.level=='1'){
                    provinceData[data.code]=dd;
                }else if(data.level=='2'){
                    cityData[data.code]=dd;

                }else if(data.level=='3'){
                    areaData[data.code]=dd;
                }
            }
            for (var i in areaData){
                var aData=areaData[i];
                var pData=cityData[aData.pcode];
                var children=pData.children||{};
                children[aData.code]=aData;
                pData.children=children;
            }
            for (var i in cityData){
                var cData=cityData[i];
                var pData=provinceData[cData.pcode];
                var children=pData.children||{};
                children[cData.code]=cData;
                pData.children=children;
            }
            // 默认值;
            changeValue('',regionData,provinceData);
        }
    });
    $("select[name='province']").bind("change",function (event) {
        $("#provinceName").html('').append(event.currentTarget.selectedOptions[0].text);
        $("#provinceValue").html('').append(event.currentTarget.selectedOptions[0].value);
        const value=this.value;
        changeValue(value,regionData,provinceData);

    });
    $("select[name='city']").bind("change",function (event) {
        $("#cityName").html('').append(event.currentTarget.selectedOptions[0].text);
        $("#cityValue").html('').append(event.currentTarget.selectedOptions[0].value);
        const value=this.value;
        changeValue(value,regionData,provinceData);

    });
    $("select[name='county']").bind("change",function (event) {
        $("#countyName").html('').append(event.currentTarget.selectedOptions[0].text);
        $("#countyValue").html('').append(event.currentTarget.selectedOptions[0].value);
    });
}